<template>
    <div>
        <el-row>
            <el-col :span="24" class="check_bill_int">
                <!-- 输入就筛选 @input="intContent()" -->
                <el-input placeholder="出票企业/审核客服" v-model="form.searchParam" clearable @clear="inputChoose()"></el-input>
                <el-button type="primary" size="small" @click="inputChoose()">搜索</el-button>
            </el-col>
            <el-col :span="24">
                <FiltrateTemplate
                        :templateSource="this.filterSource"
                        @changeSourceFun="changeSourceFun"
                        @changeAcceptFun="changeAcceptFun"
                        @changeBillStatusQueryFun="changeBillStatusQueryFun"
                        @changeUserIdFun="changeUserIdFun"
                        @changeFlawFun="changeFlawFun"
                        @changeOutTimeFun="changeOutTimeFun"
                        @changeBillFlowFun="changeBillFlowFun"
                        @changePriceFun="changePriceFun"
                        @changePriceConfirmFun="changePriceConfirmFun"
                        @changePriceClearFun="changePriceClearFun"
                        @changeTimeFun="changeTimeFun"
                        @changeTimeComfirmFun="changeTimeComfirmFun"
                        @changeTimeClearFun="changeTimeClearFun"
                        @changeCheckTimeFun="changeCheckTimeFun"
                        @changeCheckTimeComfirmFun="changeCheckTimeComfirmFun"
                        @changeCheckTimeClearFun="changeCheckTimeClearFun"
                        @clearAllChooseFun="clearAllChooseFun"
                        @closeTagFun="closeTagFun"
                        ref="filterBillQueryTem">
                </FiltrateTemplate>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column label="录入时间" width="124">
                <template slot-scope="scope">
                    <span>{{scope.row.bill_create_time_Y}}</span><br/><span>{{scope.row.bill_create_time_H}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="bill_style_name" label="票据来源"> </el-table-column>
            <el-table-column prop="drawer_name" label="出票企业"> </el-table-column>
            <el-table-column prop="bill_sum_price" label="票面金额(万元)" width="143"> </el-table-column>
            <el-table-column prop="bill_acceptor_type_name" label="承兑机构"> </el-table-column>
            <el-table-column prop="bill_acceptor_name" label="承兑人"> </el-table-column>
            <el-table-column label="到期时间" width="124">
                <template slot-scope="scope">
                    <span>{{scope.row.bill_deadline_time_Y}}</span><br/><span>{{scope.row.bill_deadline_time_T}}</span>
                </template>
            </el-table-column>
            <el-table-column label="背书瑕疵">
                <template slot-scope="scope">
                    <div :class="{'tableRed':scope.row.bill_flaw_ids != '1500'}">
                        {{ formatterFlaw(scope.row.bill_flaw_names.join(',')) }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="drawer_simple_enterprise_name" label="关联中介"> </el-table-column>
            <el-table-column prop="bill_is_checked_name" label="审核状态"> </el-table-column>
            <el-table-column prop="bill_status_name" label="票据状态"> </el-table-column>
            <el-table-column label="审核时间" width="124">
                <template slot-scope="scope">
                    <span>{{scope.row.bill_check_time_Y}}</span><br/><span>{{scope.row.bill_check_time_H}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="bill_check_name" label="审核人"> </el-table-column>
            <el-table-column prop="bill_overdue_checked_name" label="是否逾期"> </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="detailBill(scope.row.bill_id)"><i class="iconfont icon-xiangqing icon_edit_style"></i> 详细</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="right clear">
            <el-pagination
                    @size-change="onSizeChange"
                    @current-change="onFlipOver"
                    :current-page="pagination.currentPage"
                    :page-sizes="pagination.pageSizes"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <DialogContent ref="billDetailDialog" title="票据详情">
            <BillDetail :billModel="this.billModel" @closeDialog="closeDialog"></BillDetail>
        </DialogContent>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import Pagination from "@/types/Pagination";
    import FiltrateTemplate from '@common/FiltrateTemplate.vue';
    import DialogContent from '@common/DialogContent.vue';
    import BillDetail from '@common/BillDetail.vue';
    import moment from 'moment';
    import { ellipsis } from '@/util/format'
    import calc from 'calculatorjs';
    @Component({
        extends: Pagination,
        components: {
            FiltrateTemplate,
            DialogContent,
            BillDetail
        }
    })
    export default class BillQuery extends Vue {
        form = {
            billSource: '',
            acceptorType: '',
            billStatusQuery: '',
            userId: '',
            flaw: '',
            outTime: '',
            searchParam: '',
            billFlow: ''
        }
        filterCondition = {
            billPrice: { min: '', max: '', gtoe: false, ltoe: false },
            // 到期天数
            expiresDays: { min: '', max: '', gtoe: false, ltoe: false },
            checkTimes: { min: '', max: '', gtoe: false, ltoe: false },
        }
        tableData = []
        filterSource: string = 'billQuery';
        billModel: any = {};
        async getBillQueryList () {
            let sendPrice: string = ''
            let sendDays: string = ''
            let sendCheckDays: string = ''
            if(this.filterCondition.billPrice.min == '' && this.filterCondition.billPrice.max == ''){
                sendPrice = ''
            } else {
                if(this.filterCondition.billPrice.max == '+∞'){
                    this.filterCondition.billPrice.max = '';
                }
                sendPrice = this.filterCondition.billPrice.min + ',' + this.filterCondition.billPrice.max;
            }
            if(this.filterCondition.expiresDays.min == '' && this.filterCondition.expiresDays.max == ''){
                sendDays = ''
            } else {
                if(this.filterCondition.expiresDays.max == '+∞'){
                    this.filterCondition.expiresDays.max = '';
                }
                sendDays = this.filterCondition.expiresDays.min + ',' + this.filterCondition.expiresDays.max;
            }
            if(this.filterCondition.checkTimes.min == '' && this.filterCondition.checkTimes.max == ''){
                sendCheckDays = ''
            } else {
                if(this.filterCondition.checkTimes.max == '+∞'){
                    this.filterCondition.checkTimes.max = '';
                }
                sendCheckDays = this.filterCondition.checkTimes.min + ',' + this.filterCondition.checkTimes.max;
            }
            let params = {
                currentPage: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
                orderBy: '',
                searchParam: this.form.searchParam,
                billStyleId: this.form.billSource,
                acceptorTypeId: this.form.acceptorType,
                billSumPrice: sendPrice,
                deadlineTime: sendDays,
                billFlawIdsExist: this.form.flaw,
                billStatus: this.form.billStatusQuery,
                outTime: this.form.outTime,
                customerId: this.form.userId,
                checkTime: sendCheckDays,
                billFlow: this.form.billFlow
            }
            let res = await this.$http.post('bills/bill/getAllBillsByParam', params)
            if (res.status == 200) {
                if (res.data == null){
                    this.tableData = []
                    this.pagination.total = 0
                } else {
                    let { items, totalNum } = res.data;
                    items.forEach((i) => {
                        i.bill_create_time_Y = moment(i.bill_create_time).format('YYYY-MM-DD')
                        i.bill_create_time_H = moment(i.bill_create_time).format('HH:mm:ss')
                        if (i.bill_check_time != '' && i.bill_check_time != null && i.bill_check_time != undefined) {
                            i.bill_check_time_Y = moment(i.bill_check_time).format('YYYY-MM-DD')
                            i.bill_check_time_H = moment(i.bill_check_time).format('HH:mm:ss')
                        } else {
                            i.bill_check_time_Y = '--'
                        }
                        i.bill_deadline_time_Y = moment(i.bill_deadline_time).format('YYYY-MM-DD')
                        i.bill_deadline_time_T = i.bill_deadline_time.substr(10, i.bill_deadline_time.length)
                        i.bill_sum_price = calc.div(i.bill_sum_price, 10000)
                    })
                    this.tableData = items;
                    this.pagination.total = totalNum;
                }
            }
        }
        detailBill (id) {
            this.getBillDetail(id);
        }
        async getBillDetail (billId:string|number) {
            let res = await this.$http.get(`bills/billProduct/getBillDetails/${billId}`)
            if (res.status == 200){
                this.billModel = res.data;
                if (res.data.bill_back_files){
                    if (res.data.bill_back_files.length == 1){
                        this.billModel.bill_back_photo_path1 = res.data.bill_back_files[0].file_path;
                        this.billModel.bill_back_photo_path2 = '';
                    }else if(res.data.bill_back_files.length == 2){
                        this.billModel.bill_back_photo_path1 = res.data.bill_back_files[0].file_path;
                        this.billModel.bill_back_photo_path2 = res.data.bill_back_files[1].file_path;
                    }
                }
                this.$refs['billDetailDialog'].openDialog();
            }
        }
        filterFunction (filterForm: any) {
            this.pagination.currentPage = 1
            this.form = filterForm.filterModel;
            this.filterCondition = filterForm.filterCondition;
            this.getBillQueryList();
        }
        // 票据统计--票据来源
        changeSourceFun (data) {
            this.filterFunction(data)
        }
        // 承兑机构
        changeAcceptFun (data) {
            this.filterFunction(data)
        }
        // 票据状态
        changeBillStatusQueryFun (data) {
            this.filterFunction(data)
        }
        // 审核客服
        changeUserIdFun (data) {
            this.filterFunction(data)
        }
        // 背书瑕疵
        changeFlawFun (data) {
            this.filterFunction(data)
        }
        // 逾期审核
        changeOutTimeFun (data) {
            this.filterFunction(data)
        }
        // 票据流向
        changeBillFlowFun (data) {
            this.filterFunction(data)
        }
        // 票面金额 -- 切换
        changePriceFun (data) {
            this.filterFunction(data)
        }
        // 票面金额 -- 输入
        changePriceConfirmFun (data) {
            this.filterFunction(data)
        }
        // 票面金额 -- 输入（清空）
        changePriceClearFun (data) {
            this.filterFunction(data)
        }
        // 到期时间 -- 切换
        changeTimeFun (data) {
            this.filterFunction(data)
        }
        // 到期时间 -- 输入
        changeTimeComfirmFun (data) {
            this.filterFunction(data)
        }
        // 到期时间 -- 输入（清空）
        changeTimeClearFun (data) {
            this.filterFunction(data)
        }
        // 审核时间 -- 切换
        changeCheckTimeFun (data) {
            this.filterFunction(data)
        }
        // 审核时间 -- 输入
        changeCheckTimeComfirmFun (data) {
            this.filterFunction(data)
        }
        // 审核时间 -- 输入（清空）
        changeCheckTimeClearFun (data) {
            this.filterFunction(data)
        }
        closeTagFun (data) {
            this.filterFunction(data)
        }
        clearAllChooseFun (data) {
            this.filterFunction(data)
        }

        // 输入表单时
        intContent () {
            this.$refs['filterBillQueryTem'].clearAllChoose()
        }
        // 表单输入点击筛选
        inputChoose () {
            this.getBillQueryList()
        }

        closeDialog () {
            this.$refs['billDetailDialog'].closeDialog();
        }
        formatterFlaw (prop) {
            return ellipsis(prop, '...', 8)
        }
        loadDataForPagination() {
            this.getBillQueryList()
        }
        mounted () {
            this.getBillQueryList()
        }
    }
</script>

<style scoped>

</style>